<template>
    <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
        <a-breadcrumb>
            <a-breadcrumb-item href="#" @click="breadcrumbQuery(1,{id:0})">顶级分类列表</a-breadcrumb-item>
            <a-breadcrumb-item href="#" @click="breadcrumbQuery(2,entity_1)">{{entity_1.name}}</a-breadcrumb-item>
            <a-breadcrumb-item href="#" @click="breadcrumbQuery(3,entity_1)">{{entity_2.name}}</a-breadcrumb-item>
        </a-breadcrumb>
        <a-table :dataSource="categoryList"
                 :columns="columns"
                 :row-key="record=>record.id"
                 :loading="loading"
                 :pagination="{pageSize:5}"
        >

            <template v-slot:action="{text,record}">
                <a-button type="primary" v-if="grade!=3"  @click="handleQueryCategory(record)">
                    查询下级
                </a-button>
            </template>
        </a-table>
    </a-layout-content>
</template>

<script lang="ts">
    import { defineComponent, ref,onMounted } from 'vue';
    import axios from "axios";
    import {message} from "ant-design-vue"

    export default defineComponent({
        name: "admin-category",
        setup(){
            const categoryList = ref();
            const loading = ref<boolean>(false);
            const grade = ref<number>(0);
            const entity_1 = ref({});
            const entity_2 = ref({});
            const entity_3 = ref({});


            const columns= [
                {
                    title: '分类ID',
                    dataIndex: 'id'
                },
                {
                    title: '分类名称',
                    dataIndex: 'name'
                },
                {
                    title: '类型模板ID',
                    dataIndex: 'typeId'
                },
                {
                    title: '操作',
                    key:'action',
                    slots:{
                        customRender:'action'
                    }
                }
            ]

            const breadcrumbQuery=(gid:number,category:any)=>{
                grade.value=gid;

                if (grade.value == 1){
                    entity_1.value = {};
                    entity_2.value = {};
                }
                if (grade.value == 2){
                    entity_1.value = category;
                    entity_2.value = {};
                }
                if (grade.value == 3){
                    entity_2.value = category;
                }

                loading.value = true;
                axios.get('http://localhost:8899/mall-manager/ItemCat/getItemCatNext/'+category.id).then(reponse=>{
                    categoryList.value = reponse.data.data;
                    loading.value = false;
                })
            }

            const handleQueryCategory = (category:any)=>{
                grade.value = grade.value + 1;

                if (grade.value == 1){
                    entity_1.value = {};
                    entity_2.value = {};
                }
                if (grade.value == 2){
                    entity_1.value = category;
                    entity_2.value = {};
                }
                if (grade.value == 3){
                    entity_2.value = category;
                }

                loading.value = true;
                axios.get('http://localhost:8899/mall-manager/ItemCat/getItemCatNext/'+category.id).then(reponse=>{
                    categoryList.value = reponse.data.data;
                    loading.value = false;
                })
            }

            onMounted(()=>{
                handleQueryCategory({id:0});
            })

            return{
                categoryList,
                loading,
                grade,
                entity_1,
                entity_2,
                entity_3,
                columns,
                breadcrumbQuery,
                handleQueryCategory
            }
        }
    })
</script>

<style scoped>

</style>